<template>
  <div>
    <div class="leftContent d-flex">
      <el-scrollbar :max-height="maxHeight">
        <box class="mb-3" :wvalueth="480" :title="'数据管理'">
          <div class="mb-1">
            <p class="font-lan-gray-60">地图管理：</p>
            <el-row :gutter="16">
              <el-col :span="12">
                <coverage v-model="data.select" :placeholder="'图层管理'" :options="data.coverage" @change="slecetChange" />
              </el-col>
              <el-col :span="12">
                <maptype />
              </el-col>
            </el-row>
          </div>
          <div class="mb-1">
            <p class="font-lan-gray-60">设备管理：</p>
            <scCascader v-model="data.pullData" :placeholder="'数据管理'" :options="data.pullDatas" :label="'name'" :value="'id'" @change="acscaderChange"/>
          </div>
          <div>
            <p class="font-lan-gray-60">数据范围：</p>
            <scCascader v-model="data.cascader" :placeholder="'地址管理'" :options="storage.state.area" :label="'name'" :value="'id'" @change="acscaderChange"/>
          </div>
        </box>
        <box :wvalueth="480" :title="'设备数据统计'">
          <decorate2 class="mb-2" :title="'设备类型统计'" />
          <div class="d-flex ai-center mb-2">
            <div class="echart mr-3">
            <pieB :data="{
                showTitle:false,
                color:data.deviceTypes.map((item)=>item.background),
                list:data.deviceTypes
              }"/>
            </div>
            <div class="flex-1">
              <div v-for="(item, index) in data.deviceTypes" :key="index" class="chartItem d-flex ai-center jc-between mb-2">
                <div>
                  <span class="chartIcon mr-2" :style="{ background: item.background }"></span>
                  <span class="font-lan">{{ item.name }}</span>
                </div>
                <div class="font-lan">
                  <span class="mr-3">{{ item.count }}</span>
                  <span class="ratio">{{ item.value }}%</span>
                </div>
              </div>
            </div>
          </div>
          <decorate2 class="mb-2" :title="'设备状态统计'" />
          <el-row :gutter="16">
            <el-col :span="8" v-for="(item,index) in data.deviceStatus" :key="index">
              <div class="d-flex ai-center">
                <img :src="item.img" alt="">
                <p class="font-lan ml-1">{{item.name}}</p>
              </div>
              <div class="deviceStatus">
                <img class="mr-2" :src="selectL" alt="">
                <div>
                  <span class="font-num" :style="{color:item.background}">{{item.number}}</span>
                  <span class="font-lan-m">个</span>
                </div>
              </div>
            </el-col>
          </el-row>
        </box>
      </el-scrollbar>
      <div class="icons ml-3">
        <div v-for="(item, index) in data.deviceType" :key="index" class="iconInfo d-flex ai-center">
          <img class="legend mr-2" :src="item.icon" alt="">
          <div class="name">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <div class="rightContent">
      <el-scrollbar :max-height="maxHeight">
        <box :width="480" :title="'设备运行日志'" class="mb-4">
          <el-scrollbar :min-height="200" :max-height="400">
            <div v-for="(item, index) in data.logList" :key="index" class="d-flex ai-center mb-2">
              <!-- <img :src="item.img" alt="" class="logImg mr-2"> -->
              <div class="flex-1">
                <div class="d-flex ai-center jc-between mb-2">
                  <p class="font-lan-m">{{item.equipmentName}}</p>
                  <p class="font-lan-gray-60-m">{{item.recordTime}}</p>
                </div>
                <div class="logContent">{{item.logValue}}</div>
              </div>
            </div>
          </el-scrollbar>
        </box>
        <!-- <box :width="480" :title="'巡查管护记录统计'">
          <decorate2 class="mb-2" :title="'土壤数据统计'" />
          <div class="d-flex ai-center mb-2">
            <div class="echart mr-3">
            <pieB :data="data.pidData"/>
            </div>
            <div class="flex-1">
              <div v-for="(item, index) in data.deviceTypes" :key="index" class="chartItem d-flex ai-center jc-between mb-2">
                <div>
                  <span class="chartIcon mr-2" :style="{ background: item.background }"></span>
                  <span class="font-lan">{{ item.name }}</span>
                </div>
                <div class="font-lan">
                  <span class="mr-3">{{ item.count }}</span>
                  <span>{{ item.value }}%</span>
                </div>
              </div>
            </div>
          </div>
          <div class="d-flex mb-3">
						<div :class="['tag', 'mr-3', 'pointer', active == index ? 'active' : '']" v-for="(item, index) in data.tags"
							:key="index" @click="tagsChange(item, index)">
							<p :class="['font-lan','white-nowrap', active == index ? 'text-shadow' : 'font-lan-gray-60']">{{ item.name }}</p>
						</div>
					</div>
        </box> -->
      </el-scrollbar>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, onMounted, onUnmounted, computed } from "vue";
import pieB from "@/chart/pieChart/pic-bole";
import { calculateCenter } from "@/utils/common";
import mapControler from "@/components/mapContainer/mapControler";
import storage from '@/store'
import { useRouter } from 'vue-router';
import {
  deviceStatistics,
  infrastructure,
  logList,
  equipmentList
} from "@/public/request/http";
import moment from "moment";

export default defineComponent({
  components: {
    pieB,
  },
  setup() {
    //变量
    const maxHeight = computed(() => window.innerHeight - 160 + 'px')
    const router = useRouter()
    const data: any = reactive({
      coverage: [],
      pullDatas:[],
      pullData:[],
      select: null,
      cascader: [],
      address: [],
      deviceTypes: [],
      deviceStatus:[],
      pidData:{
        list:[]
      },
      logList:[],
      tags:[{name:'有机质',value:0},{name:'可溶性盐',value:0},{name:'酸碱度',value:0},{name:'有效磷',value:0},{name:'全效钾',value:0},],
      deviceType:[{type:0},{type:1},{type:2},{type:3},{type:4},{type:5}]
    });
    const tableData = ref([]);
    const searchData: any = reactive({
      personConfirmation: null,
      district: [],
      option1: 1,
      option2: 1,
    });
    const decorate1 = require("@/assets/img/decorate1.png");
    const farmland = require("@/assets/img/farmland.png");
    const area = require("@/assets/img/area.png");
    const selectL = require("@/assets/img/select-left.png");
    const active = ref(0)
    // 生命周期
    onMounted(async () => {
      //
      data.pullDatas = [storage.state.dataSources[router.currentRoute.value.meta.index.toString()]]
      data.deviceType.forEach(item=>{
        item.name = getType(item.type).name
        item.icon = getType(item.type).icon
      })
      await getDeviceStatistics()
      getInfrastructure()
      getLogList()
      getEquipmentList()
      mapControler.mapReSet();
    });

    onUnmounted(() => {
      //
    });

    //methods
    const getDeviceStatistics = async () => {
      try {
        let res = await deviceStatistics(
          {
            areaId:data.cascader.length>0?data.cascader[data.cascader.length - 1].id:null,
          }
        );
        data.deviceStatus = res.deviceState.map(item=>{
          return {
            name:getState(item.num).name,
            img:getState(item.num).img,
            background:getState(item.num).background,
            number:item.number
          }
        })
        data.deviceTypes = res.deviceType.map(item=>{
          return {
            name:getType(item.type).name,
            background:getType(item.type).background,
            value:parseFloat(item.ratio),
            count:item.number
          }
        })
      } catch (error) {
        return
      }
    }

    const getInfrastructure = async () => {
      try {
        let res = await infrastructure(
          {
            areaId:data.cascader.length>0?data.cascader[data.cascader.length - 1].id:null,
          }
        );
      } catch (error) {
        return
      }
    }

    const getEquipmentList = async () => {
      try {
        let res = await equipmentList();
        res.rows.forEach(item=>{
          item.devieceType = 'device'
          item.mapPop = getType(item.type).mapPop
          mapControler.drawMark(item.lon,item.lat,getType(item.type).icon,item)
        })
        
      } catch (error) {
        return
      }
    }
    

    const getLogList = async () => {
      try {
        let res = await logList(
          {
            areaId:data.cascader.length>0?data.cascader[data.cascader.length - 1].id:null,
          }
        );
        data.logList = res.records
      } catch (error) { }
    }

    const slecetChange = (e) => {
      console.log(e);
    }

    const acscaderChange = (e) => {
      getDeviceStatistics()
      getInfrastructure()
      getLogList()
    }

    const tagsChange = (item,index)=>{
      active.value = index
    }

    const getState = (val)=>{
      let obj = {
        img: '',
        name: '',
        background: ''
      }
      switch (val) {
        case 0:
          obj.name = '在线设备';
          obj.background = 'rgba(98, 245, 186, 1)';
          obj.img = require('@/assets/img/online.png');
          break;
        case 1:
          obj.name = '离线设备';
          obj.background = 'rgba(163, 180, 204, 1)';
          obj.img = require('@/assets/img/offline.png');
          break;
        default:
          obj.name = '异常设备';
          obj.background = 'rgba(245, 215, 98, 1)';
          obj.img = require('@/assets/img/warning.png');
          break;
      }
      return obj
    }

    const getType = (val)=>{
      let obj = {
        name: '',
        background: '',
        icon:'',
        mapPop:''
      }
      switch (val) {
        case 0:
          obj.name = '水肥一体机';
          obj.background = 'rgba(147, 245, 225, 1)';
          obj.icon = require('@/assets/img/deviceIcon_0.png');
          obj.mapPop = 'popWindows1';
          break;
        case 1:
          obj.name = '监控设备';
          obj.background = 'rgba(147, 170, 245, 1)';
          obj.icon = require('@/assets/img/deviceIcon_1.png');
          obj.mapPop = 'popWindows2';
          break;
        case 2:
          obj.name = '气象站';
          obj.background = 'rgba(147, 219, 245, 1)';
          obj.icon = require('@/assets/img/deviceIcon_2.png');
          obj.mapPop = 'popWindows3';
          break;
        case 3:
          obj.name = '虫情仪';
          obj.background = 'rgba(245, 186, 147, 1)';
          obj.icon = require('@/assets/img/deviceIcon_3.png');
          obj.mapPop = 'popWindows4';
          break;
        case 4:
        obj.name = '土壤墒情仪';
          obj.background = 'rgba(245, 225, 147, 1)';
          obj.icon = require('@/assets/img/deviceIcon_4.png');
          obj.mapPop = 'popWindows5';
          break;
        default:
          obj.name = '孢子仪';
          obj.background = 'rgba(192, 147, 245, 1)';
          obj.icon = require('@/assets/img/deviceIcon_5.png');
          obj.mapPop = 'popWindows6';
          break;
      }
      return obj
    }

    // return
    return {
      data,
      area,
      decorate1,
      farmland,
      tableData,
      searchData,
      selectL,
      slecetChange,
      acscaderChange,
      moment,
      maxHeight,
      moveTo,
      active,
      tagsChange,
      storage
    };
  },
});
</script>

<style lang="scss" scoped>
@import "@/assets/scss/index.scss";

.chartItem {
  padding: 4px 8px;
  background: rgba(153, 207, 255, 0.08);

  .chartIcon {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: #93F5E1;
    border-radius: 2px 2px 2px 2px;
  }
  .ratio{
    display: inline-block;
    min-width: 50px;
    text-align: right;
  }
}
.deviceStatus{
  display: flex;
  align-items: center;
  background: linear-gradient(91deg, #99cfff4d 0%, rgba(153,207,255,0) 100%);
}
.tag{
  padding: 0 10px;
  background: linear-gradient(90deg, rgba(82,147,204,0.3) 0%, #5293CC 47%, rgba(82,147,204,0.3) 100%);
  box-shadow: inset 0px 0px 8px 0px rgba(255,255,255,0.16);
  border-radius: 2px 2px 2px 2px;
  opacity: 1;
  border: 1px solid;
  border-image: linear-gradient(90deg, rgba(153, 207, 255, 0), rgba(153, 207, 255, 0.3), rgba(153, 207, 255, 1), rgba(153, 207, 255, 0.3)) 1 1;
}
.active{
  position: relative;
  background: linear-gradient(351deg, #CCA352 0%, #F5D493 100%);
  border-radius: 2px 2px 2px 2px;
  border-image: linear-gradient(270deg, rgba(245, 212, 147, 1), rgba(255, 235, 153, 1)) 1 1;
}
.active::before{
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  position: absolute;
  top: -4px;
  left: -4px;
  background: rgba(245,196,98,0.6);
}
.active::after{
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  position: absolute;
  right: -4px;
  bottom: -4px;
  background: rgba(245,196,98,0.6);
}
.text-shadow{
  text-shadow: 0px 2px 4px rgba(0,0,0,0.16);
}
.logImg{
  width: 48px;
  height: 48px;
}
.logContent{
  font-size: 16px;
  font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
  font-weight: 500;
  color: #CCE7FF;
  line-height: 24px;
}
.legend{
  width: 16px;
  height: 16px;
}
</style>
